<template>
  <a-spin :spinning="spinning">
    <div class="top_content">
      <div class="content">
        <h2 class="header_title">收货地址：</h2>
        <div style="margin-top: 20px">
          <!-- 收获地址展示 -->
          <div
            style="
              height: 150px;
              margin-left: 60px;
              margin-right: 60px;
              display: flex;
              justify-content: center;
            "
          >
            <div class="address_style" id="div_id">
              <div style="height: 120px; padding: 10px">
                <div class="toUser">
                  <div style="width: 350px">
                    <span style="overflow: hidden; text-overflow: ellipsis"
                      >{{ address.receiver }}收</span
                    >
                  </div>
                </div>
                <div class="toAddressStyle">
                  <div>
                    {{ address.regionDetails }}
                  </div>
                  <div>{{ address.phone }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 商品信息展示 -->
          <div class="goodsInfo">
            <a-list item-layout="vertical" size="large" :data-source="listData">
              <!-- 页脚展示 -->
              <template #footer>
                <div
                  style="
                    margin-top: 20px;
                    margin-bottom: 80px;
                    display: flex;
                    justify-content: space-between;
                  "
                >
                  <!-- 左侧区域 -->
                  <div style="margin-left: 20px">
                    <h3>商品总价</h3>
                    <h3>订单编号</h3>
                    <h3>订单状态</h3>
                    <h3>订单创建</h3>
                    <h3>订单支付</h3>
                  </div>

                  <!-- 右侧区域 -->
                  <div>
                    <div style="margin-bottom: 10px; font-weight: bold">
                      <span
                        ><PayCircleOutlined
                          style="margin-right: 5px; color: #ff0036"
                        />
                        <span
                          style="
                            font-size: 18px;
                            font-weight: bold;
                            color: #ff0036;
                          "
                        >
                          {{ towNumber(totalPrice) }}
                        </span>
                      </span>
                    </div>

                    <div style="margin-bottom: 10px">
                      <span style="font-size: 16px; font-weight: bold">{{
                        orderId
                      }}</span>
                    </div>

                    <div style="margin-bottom: 10px">
                      <span>
                        <a-tag
                          class="update_tag"
                          style="
                            font-weight: bold;
                            font-size: 14px;
                            height: 25px;
                            color: #303133;
                          "
                          color="#67C23A"
                          >已支付</a-tag
                        >
                      </span>
                    </div>

                    <div>
                      <h3>{{ createTime }}</h3>
                    </div>
                    <div>
                      <h3>{{ payTime }}</h3>
                    </div>
                  </div>
                </div>
              </template>
              <template #renderItem="{ item }">
                <a-list-item key="item.title">
                  <!-- 小图标展示 -->
                  <template #actions>
                    <span>
                      <component
                        :is="PayCircleOutlined"
                        style="margin-right: 8px; color: #ff0036"
                      />
                      单价：<span
                        style="
                          font-size: 16px;
                          font-weight: bold;
                          color: #ff0036;
                        "
                        >{{ towNumber(item.price) }}</span
                      >
                    </span>
                    <span>
                      <component
                        :is="DiffOutlined"
                        style="margin-right: 8px; color: #67c23a"
                      />
                      数量：<span
                        style="font-size: 16px; font-weight: bold; color: black"
                        >{{ item.number }}</span
                      >
                    </span>
                    <span>
                      <component
                        :is="AccountBookOutlined"
                        style="margin-right: 8px; color: #ff0036"
                      />
                      小计：<span
                        style="
                          font-weight: bold;
                          font-size: 16px;
                          color: #ff0036;
                        "
                        >{{ towNumber(item.subTotalPrice) }}</span
                      >
                    </span>
                  </template>
                  <!-- 最右侧图片 -->
                  <template #extra>
                    <img
                      width="100"
                      alt="logo"
                      :src="item.image"
                      style="border-radius: 10px"
                    />
                  </template>
                  <a-list-item-meta :description="item.introduce">
                    <template #title>
                      <a :href="item.href">
                        <h3 style="font-weight: bold; color: #303133">
                          {{ item.homeName }}
                        </h3>
                      </a>
                    </template>
                    <template #avatar
                      ><a-avatar size="large" :src="item.storeImage"
                    /></template>
                  </a-list-item-meta>
                  <router-link @click="toDetail(item.key)" to="">
                    <span style="font-weight: bold; font-size: 16px">
                      {{ item.name }}
                    </span>
                  </router-link>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script setup>
import {
  DiffOutlined,
  AccountBookOutlined,
  PayCircleOutlined,
} from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { ref, onMounted } from "vue";
import { getGoodsList } from "@/api/goods";
import { getById } from "@/api/address";
import { getOrderCreateTime } from "@/api/pay.js";

const route = useRoute();
const goodsIds = ref([]);
goodsIds.value = route.query.id;
const orderId = ref(null);
orderId.value = route.query.orderId;
const addressId = ref(null);
addressId.value = route.query.addressId;

const address = ref({
  receiver: "",
  phone: "",
  regionDetails: "",
});
const listData = ref([]);
const totalPrice = ref(0);
const spinning = ref(true);
const createTime = ref(null);
const payTime = ref(null);
onMounted(() => {
  setTimeout(() => {
    //获取当前用户的所有收获地址
    getAddress();
    ////获取购物车中的商品信息
    getGoodsList(goodsIds.value, orderId.value).then((res) => {
      if (res.code == 200) {
        listData.value = res.data.data;
        totalPrice.value = res.data.totalPrice;
      }
    });

    //获取订单创建和支付的时间
    getOrderCreateTime(orderId.value).then((res) => {
      if (res.code === 200) {
        createTime.value = res.data.createTime;
        payTime.value = res.data.payTime;
      }
    });
    spinning.value = false;
  }, 1000);
});

function getAddress() {
  getById(addressId.value).then((res) => {
    if (res.code == 200) {
      address.value = res.data;
    }
  });
}

//去商品详情页
function toDetail(id) {
  router.push({ name: "Detail", query: { id: id } });
}

//展示价格的小数方法
function towNumber(val) {
  return val.toFixed(2);
}
</script>

<style scoped>
.top_content {
  height: auto;
  margin-top: 10px;
  background-color: #fff;
}
.content {
  margin-left: 60px;
  margin-right: 60px;
  padding-top: 10px;
}

.header_title {
  line-height: 25px;
  color: #333;
  font-weight: 700;
  font-size: 14px;
  padding-left: 25px;
}

.address_style:hover {
  box-shadow: 10px 10px 5px gray, 10px 10px 5px gray;
}

.address_style {
  height: 150px;
  background-color: #fff;
  width: 60%;
  opacity: 0.8;
  transition: all 0.5s;
  border-radius: 10px;
}

.toUser {
  border-bottom: 1px solid #f2f2f2;
  padding: 0 0 5px;
  margin-bottom: 5px;
  line-height: 18px;
  font-weight: 700;
  height: 30px;
}

.toAddressStyle {
  letter-spacing: 1px;
  font-size: 12px;
  width: 100%;
  height: 100px;
}

.commitOrder {
  border-radius: 50px;
  display: flex;
  justify-content: flex-end;
  height: 50px;
  margin-left: 60px;
  margin-right: 60px;
  background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));
}

.submit_order {
  background: linear-gradient(90deg, rgb(255, 119, 0), rgb(255, 73, 0));
  border: none;
  height: 50px;
  width: 150px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50px;
}

.btn {
  transform: scale(1);
}

.btn:active {
  transform: scale(0.97);
}

.update_tag {
  transform: scale(1);
}

.update_tag:active {
  transform: scale(0.8);
}

.everyOne {
  margin-top: 20px;
  padding-left: 10px;
}

.order_item {
  font-size: 16px;
  font-weight: bold;
}
</style>
